<template>
  <div class="zuida">
    <div class="shang">
      <div class="student">
        <div>
          <el-statistic
            group-separator=","
            :precision="0"
            :value="count1"
            :title="title2"
          ></el-statistic>
        </div>
      </div>
      <div class="teacher">
        <div>
          <el-statistic
            group-separator=","
            :precision="0"
            :value="count2"
            :title="title1"
          ></el-statistic>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      count1:'',
      count2:'',
      token:'',
      value2: this.count1,
        title2: "学生总人数",
        title1: "教师总人数",
    }
  },
    mounted(){
      this.$store.commit('isShow')
      this.token=localStorage.getItem('token')
      this.student()
      this.teacher()
    },
    methods:{
      student(){
        this.axios.get("/studentcount",{
          headers:{
              token:this.token,
              
            }
        }).then((res)=>{
          this.count1=res.data.data;
        })
      },
      teacher(){
        this.axios.get("/teachercount",{
          headers:{
              token:this.token,
              
            }
        }).then((res)=>{
          this.count2=res.data.data;
          console.log(res);
        })
      }
    }
  
}
</script>
<style lang="less" scoped>
    .zuida{
        width: 100%;
        height: 80vh;
        background-image: url("../img/main.jpg");
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    }
    .shang{
      padding-top: 20px;
      width: 100%;
      height: 100px;
      // background-color: red;
      display: flex;
      justify-content:space-around;
      .student{
        width: 20%;
        height: 100%;
      }
      .teacher{
        width: 20%;
        height: 100%;
      }
    }
    /deep/.head{
      font-size: 18px;
    }
</style>